<template>
    <div id="header_area">
        <div style="position: absolute;right: 20px;font-size:12px;">您好,{{uid}}<el-button type="text"  @click="logout()">退出登录</el-button></div>
        <!-- 左边，首页 -->
        <!-- 右边，退出登录，登录用户名，警告之类 -->
        
    </div>
</template>
<script type="text/javascript">
import VueCommon from '../VueCommon.js'
export default {
    // 数据
    data() {
        // let uid = VueCommon.store_getStr('uid')
        // return {
        //     uid: uid
        // }
        return {}
    },
    props: { //表示本组件需要哪些数据。
        uid: {
            type: String,
            default: 'NULL',
        },
        count: {
            type: Number,
            default: 10
        },
        start: {
            type: Number,
            default: 0
        },
        total: {
            type: Number,
            default: 250
        }
    },
    computed: {
        size: {
            get() {
                return this.count
            },
            set(val) {
                this.$emit('sizeChange', val)
            }
        },
        list() {
            let now = this.start / this.count + 1
            let all = Math.ceil(this.total / this.count)
            let array = []
            for (let index = 1; index <= all; index++) {
                array.push({
                    to: index,
                    isNow: index === now
                })
            }
            return array
        }
    },
    methods: {
        logout() {
            let vm = this
            vm.confirm('确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                VueCommon.saveLogin(this.uid, '')
                window.location.href = "/index.html#/login"
                return
            }).catch(() => {

            });
        },
    },
    watch: {},
    // 资源
    components: {},
    directives: {},
    filters: {},
    // 生命周期钩子
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {

    },
    beforeUpdate() {},
    updated() {},
    activated() {},
    deactivated() {},
    beforeDestory() {},
    destoryed() {}
}
</script>
